前言：從文字情報到視覺饗宴

在前幾天的文章中，我們已經成功讓 n8n 成為了我們的文字情報員，能夠自動監控 RSS、過濾關鍵字，並將最新的文章資訊推播到 Discord。但是，在這個視覺化當道的時代，有時候一張有趣的圖片，勝過千言萬語。

你是否也想每天上班時，都有最新的 PTT 熱門趣圖自動送到你的摸魚頻道，為枯燥的工作增添一絲樂趣？

今天，我們就要來升級我們的 n8n 情報員，教它如何從網頁中直接抓取圖片，並將這些視覺化的「梗圖」或「貓貓圖」自動發送到 Discord。

我們的目標： 建立一個 n8n 工作流，定時爬取 PTT 表特版 (Beauty) 的網頁，解析出所有圖片的連結，並將這些圖片作為檔案，直接發送到指定的 Discord 頻道。

一、核心工作流架構：爬蟲、解析、發送

這個流程的核心是 HTTP Request 節點與 HTML Extract 節點的組合，這也是 n8n 進行網頁爬蟲的經典套路。

A[Schedule: 每小時觸發] --> B[HTTP Request: 抓取PTT網頁原始碼];
B --> C[HTML Extract: 解析出所有圖片連結];
C --> D[Loop Over Items: 逐一處理每張圖片];
D --> E[HTTP Request: 下載圖片檔案];
E --> F[Discord: 發送圖片檔案];`

二、實作步驟詳解

步驟 1：HTTP Request 節點 (網頁爬蟲)

首先，我們要讓 n8n 像瀏覽器一樣，去訪問 PTT 表特版的網頁，並把整個網頁的 HTML 原始碼下載回來。

• 節點類型: HTTP Request
• URL: https://www.ptt.cc/bbs/Beauty/index.html
• 重要設定：由於 PTT 會檢查你是否年滿 18 歲，我們需要模擬點擊「我同意」按鈕的行為。這可以通過在請求中加入 Cookie 來實現。
  • 點擊 Headers → Add Header。
  • Name: Cookie
  • Value: over18=1

步驟 2：HTML Extract 節點 (圖片連結解析器)

上一步我們拿到了整個網頁的 HTML，現在需要從中把所有圖片的連結「提取」出來。

• 節點類型: HTML Extract
• Source Data: HTML
• Extraction Values:
  • 點擊 Add Extraction。
  • Key: imageUrls (你可以自訂一個名稱)。
  • CSS Selector: a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]
    • 這段 CSS 選擇器的意思是：選取所有 <a> 標籤，且其 href 屬性是以 .jpg, .jpeg, .png 或 .gif 結尾的。這能幫我們精準地抓到所有圖片連結。
  • Return Value: Attribute。
  • Attribute: href。

執行後，這個節點會輸出一組包含所有圖片 URL 的資料。

步驟 3：Loop Over Items 節點 (逐一處理)

由於上一步會一次性輸出大量的圖片連結，我們需要一個 Loop Over Items 節點，來將這些連結一個一個地、依序地交給後續的節點處理。

• 節點類型: Loop Over Items
• Input Data: {{$json.imageUrls}} (從上一個 HTML Extract 節點取得圖片 URL 列表)。
• 這個節點會自動將 imageUrls 陣列中的每一個 URL，依序執行一次後續的流程。

步驟 4：HTTP Request 節點 (下載圖片)

現在，我們要在迴圈中，針對每一個圖片 URL，發起請求將圖片的「二進位資料」下載下來。

• 節點類型: HTTP Request (放在迴圈內部)
• URL: {{$json.value}} (這裡的 value 是 Loop Over Items 節點每次迭代輸出的單一圖片 URL)。
• Response Format: File。這是最關鍵的一步！ 將回應格式設為 File，n8n 才會將下載的內容視為一個檔案，而不是純文字。

步驟 5：Discord 節點 (發送圖片檔案)

最後一步，就是將我們下載好的圖片檔案，發送到 Discord。

• 節點類型: Discord (放在迴圈內部)
• Channel ID: 選擇你的摸魚頻道。
• Content: 你可以留空，或加上一些文字，例如 新梗圖來囉！。
• Attachments: Input。這也是關鍵一步！ 這個設定會告訴 Discord 節點，要去讀取上一個節點 (也就是下載圖片的 HTTP Request 節點) 輸出的二進位檔案，並將其作為附件發送。

四、啟用與成果

完成所有設定並儲存後，記得將工作流右上角的開關切換為 Active。現在，你的 n8n 就會變成一個勤勞的梗圖搬運工，每小時自動為你的 Discord 頻道帶來歡樂。

這個流程不僅可以用來抓取梗圖，你還可以將 URL 換成任何你感興趣的圖片來源，例如：

• 攝影作品網站。
• 特定主題的 Pinterest 看板。
• 甚至是每日貓貓圖網站。

五、總結

Day 24 的實作，讓我們成功地從處理「文字資料」跨足到處理「二進位檔案資料」。我們學會了如何：

1. 使用 HTTP Request 節點搭配 Cookie 爬取特定網頁。
2. 利用 HTML Extract 節點與 CSS 選擇器，精準提取頁面中的特定資訊。
3. 掌握 Loop Over Items 節點來處理陣列資料。
4. 將 HTTP Request 的回應設為 File 來下載檔案。
5. 在 Discord 節點中，以 Input 的方式發送檔案附件。

這些技能組合起來，為你的 n8n 自動化工具箱增添了強大的「爬蟲」與「檔案處理」能力，讓你能實現的自動化應用，又提升到了一個全新的層次。